<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Employee>>" %>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <% Html.Telerik().Grid(Model)
        .Name("Employees")
        .Columns(columns =>
        {
            columns.Bound(e => e.FirstName).Width(140);
            columns.Bound(e => e.LastName).Width(140);
            columns.Bound(e => e.Title).Width(200);
            columns.Bound(e => e.Country).Width(200);
            columns.Bound(e => e.City);
        })
        .DetailView(detailView => detailView.Template(e =>
        {
            %>
                <%
                    Html.Telerik().TabStrip()
                        .Name("TabStrip_" + e.EmployeeID)
                        .SelectedIndex(0)
                        .Items(items =>
                        {
                            items.Add().Text("Orders").Content(() =>
                            {
                                %>
                                    <%= Html.Telerik().Grid(e.Orders)
                                           .Name("Orders_" + e.EmployeeID)
                                           .Columns(columns =>
                                            {
                                                columns.Bound(o => o.OrderID).Width(101);
                                                columns.Bound(o => o.ShipCountry).Width(140);
                                                columns.Bound(o => o.ShipAddress).Width(200);
                                                columns.Bound(o => o.ShipName).Width(200);
                                                columns.Bound(o => o.ShippedDate).Format("{0:d}");
                                            })
                                           .Pageable()
                                           .Sortable()
                                    %>
                                <%
                            });
                            items.Add().Text("Contact Information").Content(() =>
                            {
                                %>
                                    <div class="employee-details">
                                        <img src="<%= Url.Content("~/Content/Grid/Employees/" + e.EmployeeID + ".jpg") %>" alt="<%= e.FirstName + " " + e.LastName %>" />
                                        <ul>
                                            <li>
                                                <label>Birth Date:</label><%= e.BirthDate.Value.ToString("d") %>
                                            </li>
                                            <li>
                                                <label>Country:</label><%= e.Country %>
                                            </li>
                                            <li>
                                                <label>City:</label><%= e.City %>
                                            </li>
                                            <li>
                                                <label>Address:</label><%= e.Address %>
                                            </li>
                                            <li>
                                                <label>Home Phone:</label><%= e.HomePhone %>
                                            </li>
                                        </ul>
                                    </div>
                                <%
                            });                                                       

                        })
                        .Render();
                 %>
            <%    
        }))
        .RowAction(row => 
        {
            if (row.Index == 0)
            {
                row.DetailRow.Expanded = true;
            }
        })
        .Pageable(paging => paging.PageSize(5))
        .Sortable()
        .Render();
    %>
</asp:Content>
<asp:Content contentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
	    .employee-details ul
	    {
	        list-style:none;
            font-style:italic;
            margin-left:80px;
            margin-bottom: 20px;
	    }
	    .employee-details img
	    {
	        border: 1px solid #05679D;
	        float:left;
	    }
	    
	    .employee-details label
	    {
	        display:inline-block;
	        width:90px;
	        font-style:normal;
	        font-weight:bold;
	    }
    </style>
</asp:Content>